<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <base href="http://hefengxian.github.io/">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文章示例（有代码）</title>

    <link rel="shortcut icon" href="assets/site/images/favicon.ico" />

    <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/site/css/site.css">

    <script src="assets/libs/art-template/template.js"></script>
    <script src="http://cdn.bootcss.com/require.js/2.1.20/require.min.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="assets/libs/require-js/main-cdn.js"></script>
    <script src="assets/site/js/site.js"></script>
</head>
<body>
<div class="container">
    <div id="_navbar"></div>


    <div id="_content">

        <h3 class="header">
            <br>
            <i class="fa fa-code"></i>&nbsp;
            含代码文章测试
            <small>主要测试代码高亮和文字排版</small>
        </h3>

        <!-- 文章信息 -->
        <p class="info">
            <!-- 日期 -->
            <span class="date"><i class="fa fa-calendar"></i>2015-11-21</span>
            <!-- 分类 -->
            <span class="category"><i class="fa fa-folder"></i><a href="#">测试</a></span>
            <!-- 作者 -->
            <span class="author"><i class="fa fa-user"></i><a href="#">Smith</a></span>
        </p>

        <hr>
        <div class="text">
            <h4>简介</h4>
            <p><strong>Javascript</strong>一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。</p>
            <p>在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。</p>
            <p>为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。</p>
            <ul>
                <li>ECMAScript，描述了该语</li>
                <li>言的语法和基本对象。</li>
                <li>文档对象模型（DOM），描述处理网页内容的方法和接口</li>
                <li>浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口</li>
            </ul>
            <h4>代码示例一 <small>可滚动（<code>.pre-scrollable</code>）</small></h4>
            <pre class="javascript pre-scrollable">var config = {
    menu : {
        brand: {
            name: 'brand',
            label: '名字',
            icon: 'smile-o',
            link: 'index.html'
        },
        left: [
            {
                name: 'home_page',
                label: '主页',
                icon: 'home',
                link: 'index.html'
            },
            {
                name: 'tool',
                label: '工具',
                icon: 'search',
                link: 'pages/public/tools.html'
            },
            {
                name: 'more',
                label: 'More',
                icon: '',
                link: '',
                sub_menu: [
                    {
                        label: '群成员生日表',
                        icon: 'birthday-cake',
                        link: 'pages/public/qun_member_birthday.html'
                    },
                    {
                        label: 'divider',
                        divider: true
                    },
                    {
                        label: 'Javascript代码测试',
                        icon: 'code',
                        link: 'pages/public/javascript_code_test.html'
                    },
                    {
                        label: '代码类型测试2',
                        icon: 'code',
                        link: 'code2.html'
                    },
                    {
                        label: 'divider',
                        divider: true
                    },
                    {
                        label: '封面',
                        icon: 'diamond',
                        link: 'cover.html'
                    },
                ]
            }
        ],
        right: [
            {
                name: 'about',
                label: '关于',
                icon: 'info',
                link: 'about.html'
            }
        ]
    }
};


$(document).ready(function() {
    initNavbar();
});


function initNavbar() {
    var nav = $('#_navbar');
    // 如果没有找到_navbar表示不需要navbar
    if (nav.length == 1) {
        var navbarHTML = template.compile(getNavTemplate())(config);
        nav.html(navbarHTML);
    }
}

/**
 * 获取Navbar的模板
 * @returns {string}
 */
function getNavTemplate() {
    var template =
        '&lt;nav class="navbar navbar-default"&gt;' +
                '&lt;div class="container-fluid"&gt;' +
                    '&lt;div class="navbar-header"&gt;' +
                        '&lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;' +
                            '&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;' +
                            '&lt;span class="icon-bar"&gt;&lt;/span&gt;' +
                            '&lt;span class="icon-bar"&gt;&lt;/span&gt;' +
                            '&lt;span class="icon-bar"&gt;&lt;/span&gt;' +
                            '&lt;/button&gt;' +
                        '&lt;a class="navbar-brand" href="{{menu.brand.link}}"&gt;&lt;i class="fa fa-{{menu.brand.icon}}"&gt;&lt;/i&gt;&nbsp;{{menu.brand.label}}&lt;/a&gt;' +
                        '&lt;/div&gt;' +
                    '&lt;div id="navbar" class="navbar-collapse collapse"&gt;' +
                        '&lt;ul class="nav navbar-nav"&gt;' +
                            '{{each menu.left as item i}}' +
                            '{{if !item.sub_menu}}' +
                            '&lt;li&gt;&lt;a href="{{item.link}}"&gt;&lt;i class="fa fa-{{item.icon}}"&gt;&lt;/i&gt;&nbsp;{{item.label}}&lt;/a&gt;&lt;/li&gt;' +
                            '{{else}}' +
                            '&lt;li class="dropdown"&gt;&lt;a href="{{item.link}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;&lt;i class="fa fa-{{item.icon}}"&gt;&lt;/i&gt;&nbsp;{{item.label}}&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;' +
                                '&lt;ul class="dropdown-menu"&gt;' +
                                    '{{each item.sub_menu as sub_item j}}' +
                                    '{{if !sub_item.divider}}' +
                                    '&lt;li&gt;&lt;a href="{{sub_item.link}}"&gt;&lt;i class="fa fa-{{sub_item.icon}}"&gt;&lt;/i&gt;&nbsp;{{sub_item.label}}&lt;/a&gt;&lt;/li&gt;' +
                                    '{{else}}' +
                                    '&lt;li role="separator" class="divider"&gt;&lt;/li&gt;' +
                                    '{{/if}}' +
                                    '{{/each}}' +
                                    '&lt;/ul&gt;' +
                                '&lt;/li&gt;' +
                            '{{/if}}' +
                            '{{/each}}' +
                            '&lt;/ul&gt;' +
                        '&lt;ul class="nav navbar-nav navbar-right"&gt;' +
                            '{{each menu.right as item i}}' +
                            '{{if !item.sub_menu}}' +
                            '&lt;li&gt;&lt;a href="{{item.link}}"&gt;&lt;i class="fa fa-{{item.icon}}"&gt;&lt;/i&gt;&nbsp;{{item.label}}&lt;/a&gt;&lt;/li&gt;' +
                            '{{else}}' +
                            '&lt;li class="dropdown"&gt;&lt;a href="{{item.link}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;&lt;i class="fa fa-{{item.icon}}"&gt;&lt;/i&gt;&nbsp;{{item.label}}&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;' +
                                '&lt;ul class="dropdown-menu"&gt;' +
                                    '{{each item.sub_menu as sub_item j}}' +
                                    '{{if !sub_item.divider}}' +
                                    '&lt;li&gt;&lt;a href="{{sub_item.link}}"&gt;&lt;i class="fa fa-{{sub_item.icon}}"&gt;&lt;/i&gt;&nbsp;{{sub_item.label}}&lt;/a&gt;&lt;/li&gt;' +
                                    '{{else}}' +
                                    '&lt;li role="separator" class="divider"&gt;&lt;/li&gt;' +
                                    '{{/if}}' +
                                    '{{/each}}' +
                                    '&lt;/ul&gt;' +
                                '&lt;/li&gt;' +
                            '{{/if}}' +
                            '{{/each}}' +
                            '&lt;/ul&gt;' +
                        '&lt;/div&gt;' +
                    '&lt;/div&gt;' +
                '&lt;/nav&gt;';

    return template;
}
            </pre>

            <h4>代码示例二<small>可滚动（<code>.pre-scrollable</code>）</small></h4>
            <pre class="javascript pre-scrollable">/*
 * Require-CSS RequireJS css! loader plugin
 * 0.1.8
 * Guy Bedford 2014
 * MIT
 */

/*
 *
 * Usage:
 *  require(['css!./mycssFile']);
 *
 * Tested and working in (up to latest versions as of March 2013):
 * Android
 * iOS 6
 * IE 6 - 10
 * Chome 3 - 26
 * Firefox 3.5 - 19
 * Opera 10 - 12
 *
 * browserling.com used for virtual testing environment
 *
 * Credit to B Cavalier & J Hann for the IE 6 - 9 method,
 * refined with help from Martin Cermak
 *
 * Sources that helped along the way:
 * - https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent
 * - http://www.phpied.com/when-is-a-stylesheet-really-loaded/
 * - https://github.com/cujojs/curl/blob/master/src/curl/plugin/css.js
 *
 */

define(function() {
//&gt;&gt;excludeStart('excludeRequireCss', pragmas.excludeRequireCss)
  if (typeof window == 'undefined')
    return { load: function(n, r, load){ load() } };

  var head = document.getElementsByTagName('head')[0];

  var engine = window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)|AndroidWebKit\/([^ ;]*)/) || 0;

  // use &lt;style&gt; @import load method (IE &lt; 9, Firefox &lt; 18)
  var useImportLoad = false;

  // set to false for explicit &lt;link&gt; load checking when onload doesn't work perfectly (webkit)
  var useOnload = true;

  // trident / msie
  if (engine[1] || engine[7])
    useImportLoad = parseInt(engine[1]) &lt; 6 || parseInt(engine[7]) &lt;= 9;
  // webkit
  else if (engine[2] || engine[8])
    useOnload = false;
  // gecko
  else if (engine[4])
    useImportLoad = parseInt(engine[4]) &lt; 18;

//&gt;&gt;excludeEnd('excludeRequireCss')
  //main api object
  var cssAPI = {};

//&gt;&gt;excludeStart('excludeRequireCss', pragmas.excludeRequireCss)
  cssAPI.pluginBuilder = './css-builder';

  // &lt;style&gt; @import load method
  var curStyle, curSheet;
  var createStyle = function () {
    curStyle = document.createElement('style');
    head.appendChild(curStyle);
    curSheet = curStyle.styleSheet || curStyle.sheet;
  }
  var ieCnt = 0;
  var ieLoads = [];
  var ieCurCallback;

  var createIeLoad = function(url) {
    curSheet.addImport(url);
    curStyle.onload = function(){ processIeLoad() };

    ieCnt++;
    if (ieCnt == 31) {
      createStyle();
      ieCnt = 0;
    }
  }
  var processIeLoad = function() {
    ieCurCallback();

    var nextLoad = ieLoads.shift();

    if (!nextLoad) {
      ieCurCallback = null;
      return;
    }

    ieCurCallback = nextLoad[1];
    createIeLoad(nextLoad[0]);
  }
  var importLoad = function(url, callback) {
    if (!curSheet || !curSheet.addImport)
      createStyle();

    if (curSheet && curSheet.addImport) {
      // old IE
      if (ieCurCallback) {
        ieLoads.push([url, callback]);
      }
      else {
        createIeLoad(url);
        ieCurCallback = callback;
      }
    }
    else {
      // old Firefox
      curStyle.textContent = '@import "' + url + '";';

      var loadInterval = setInterval(function() {
        try {
          curStyle.sheet.cssRules;
          clearInterval(loadInterval);
          callback();
        } catch(e) {}
      }, 10);
    }
  }

  // &lt;link&gt; load method
  var linkLoad = function(url, callback) {
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    if (useOnload)
      link.onload = function() {
        link.onload = function() {};
        // for style dimensions queries, a short delay can still be necessary
        setTimeout(callback, 7);
      }
    else
      var loadInterval = setInterval(function() {
        for (var i = 0; i &lt; document.styleSheets.length; i++) {
          var sheet = document.styleSheets[i];
          if (sheet.href == link.href) {
            clearInterval(loadInterval);
            return callback();
          }
        }
      }, 10);
    link.href = url;
    head.appendChild(link);
  }

//&gt;&gt;excludeEnd('excludeRequireCss')
  cssAPI.normalize = function(name, normalize) {
    if (name.substr(name.length - 4, 4) == '.css')
      name = name.substr(0, name.length - 4);

    return normalize(name);
  }

//&gt;&gt;excludeStart('excludeRequireCss', pragmas.excludeRequireCss)
  cssAPI.load = function(cssId, req, load, config) {

    (useImportLoad ? importLoad : linkLoad)(req.toUrl(cssId + '.css'), load);

  }

//&gt;&gt;excludeEnd('excludeRequireCss')
  return cssAPI;
});
</pre>
            <h4>CSS代码展示 <small>不滚动</small></h4>
            <pre class="css">@charset "UTF-8";

/*!
Animate.css - http://daneden.me/animate
Version - 3.4.0
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}</pre>
        </div>
    </div>

    <div id="_footer"></div>
</div>


</body>
<script>
    $(document).ready(function () {
        require(['hljs'], function () {
            $('pre').each(function (i, block) {
                hljs.highlightBlock(block);
            });
        });
    });
</script>
</html>